<template>
  <div class="number-keyboard">
    <div class="key" v-for="num in numbers" :key="num" @click.stop="handleClick(num)">{{ num }}</div>
    <div class="key" @click.stop="hideKey">
        <img src="@/assets/image/icon1.png"/>
    </div>
    <div class="key" @click.stop="handleClick(0)">0</div>
    <div class="key" @click.stop="handleBackspace">   
        <img src="@/assets/image/icon2.png"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NumberKeyboard',
  data() {
    return {
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    };
  },
  props:{
    inputValue: ''
  },
  methods: {
    handleClick(num) {
      this.inputValue += num;
      this.$emit('input', this.inputValue); // 触发输入事件，将值传递给父组件
    },
    handleBackspace() {
      this.inputValue = this.inputValue.slice(0, -1); // 删除最后一个字符
      this.$emit('input', this.inputValue); // 触发输入事件，更新值
    },
    hideKey(){
        this.$emit('hide')
    }
  }
};
</script>

<style scoped>
.number-keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  background-color: #f2f3f5;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 999;
  padding-bottom: 30px;
}
.key {
    text-align: center;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid #f2f3f5;
    height: 120px;
    font-size: 54px;
    line-height: 120px;
}
.key:active {
  background-color: #ddd;
}
</style>
